<template>
  <view class="cm-tabbar cm-text-center cm-flex cm-flex-a-center cm-flex-j-around" 
    :style="[style, cmStyle]" :class="[isBottom ? 'bottom app-border-color_ex-top' : '', cmClass]"
    @touchmove.stop.prevent="moveHandler">
    <view class="cm-tabbar-item" v-for="(item, index) in tabList" :key="item.text"
      :class="[activeIndex === index ? activeClass : '']"
      @click.stop.prevent="clickHandler(index)">
      <view>
        <cm-icon :type="item.icon" v-if="item.icon && !item.img">
          <cm-badge cm-class="cm-tabbar-badge"
            :text="item.badgeTxt" :min-num="item.badgeMin" :max-num="item.badgeMax"></cm-badge>
        </cm-icon>
        <!-- 图片的优先级高于ICON -->
        <cm-img width="24px" height="24px" :src="item.img" v-else>
          <cm-badge class="cm-tabbar-badge"
            :text="item.badgeTxt" :min-num="item.badgeMin" :max-num="item.badgeMax"></cm-badge>
        </cm-img>
      </view>
      <view class="cm-text-12 cm-margin-top-3">{{ item.text }}</view>
    </view>
  </view>
</template>

<script src="./cm-tabbar.js"></script>

<style lang="stylus">
@import './cm-tabbar.styl'
</style>
